﻿<div [@routerTransition]>
  <div class="m-subheader">
    <div class="d-flex align-items-center">
      <div class="mr-auto col-xs-6">
        <h3 class="m-subheader__title m-subheader__title--separator">
          <span>管道流程</span>
        </h3>
        <span class="m-section__sub"> 管道流程的文本头信息 </span>
      </div>
      <div class="col-xs-6 text-right">
        <!--
          <button *ngIf="isGranted('Pages.Administration.Languages.Create')" (click)="createOrEditLanguageModal.show()" class="btn btn-primary blue"><i class="fa fa-plus"></i> {{l("CreateNewLanguage")}}</button>
        -->
      </div>
    </div>
  </div>

  <div class="m-content">
    <div class="m-portlet m-portlet--mobile">
      <div class="m-portlet__body m-portlet__body--no-padding">
        <div class="row m-row--no-padding m-row--col-separator-xl">
          <div class="col-md-12 col-lg-6 col-xl-4">
            <div class="m-widget24">
              <div class="m-widget24__item">
                <h4 class="m-widget24__title">我的处理</h4>
                <br />
                <span class="m-widget24__desc"> 需要我处理的管道 </span>
                <span class="m-widget24__stats"> {{ counts.mycl }} </span>
                <div class="m--space-10"></div>
              </div>
            </div>
          </div>
          <div class="col-md-12 col-lg-6 col-xl-4">
            <div class="m-widget24">
              <div class="m-widget24__item">
                <h4 class="m-widget24__title">其他处理</h4>
                <br />
                <span class="m-widget24__desc"> 需要其他人处理的管道 </span>
                <span class="m-widget24__stats"> {{ counts.othercl }} </span>
                <div class="m--space-10"></div>
              </div>
            </div>
          </div>
          <div class="col-md-12 col-lg-6 col-xl-4">
            <div class="m-widget24">
              <div class="m-widget24__item">
                <h4 class="m-widget24__title">完成</h4>
                <br />
                <span class="m-widget24__desc"> 已经完成的管道 </span>
                <span class="m-widget24__stats"> {{ counts.succl }} </span>
                <div class="m--space-10"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="row align-items-center"></div>
      </div>
    </div>

    <div class="m-portlet m-portlet--mobile">
      <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
          <div class="m-portlet__head-title">
            <h3 class="m-portlet__head-text">管道列表</h3>
            <button
                            type="button"
                            style="margin-left: 25px;"
                            class="btn btn-sm m-btn--gradient-from-accent m-btn--gradient-to-success"
                            (click)="batchPrintModal.show(selectedpipe)"
                            *ngIf="type == 3"
                        >
                            打印交接单
                        </button>
          </div>
        </div>
        <div class="m-portlet__head-tools">
          <ul
            class="nav nav-pills nav-pills--brand m-nav-pills--align-right m-nav-pills--btn-pill m-nav-pills--btn-sm"
            role="tablist"
          >
            <li class="nav-item m-tabs__item">
              <div class="btn-group m-btn-group" role="group" aria-label="...">
                <button
                  type="button"
                  class="btn btn-secondary m-btn--hover-brand"
                  [ngClass]="{ active: !isFinished && isMy }"
                  (click)="getMyDoingPipeines()"
                >
                  我的处理
                </button>
                <button
                  type="button"
                  class="btn btn-secondary m-btn--hover-brand"
                  [ngClass]="{ active: !isFinished && !isMy }"
                  (click)="getOtherDoingPipeines()"
                >
                  其他处理
                </button>
              </div>
            </li>

            <li class="nav-item m-tabs__item">
              <div class="btn-group m-btn-group" role="group" aria-label="...">
                <button
                  type="button"
                  class="btn btn-secondary m-btn--hover-brand"
                  [ngClass]="{ active: isFinished }"
                  (click)="getFilishedPipeines()"
                >
                  完成
                </button>
              </div>
            </li>

            <li
              class="nav-item m-tabs__item"
              style="width: 300px; margin-left: 40px"
            >
              <a href="javascript:;" class="m-portlet__nav-link m-btn--pill">
                <div class="m-input-icon m-input-icon--right">
                  <input
                    type="text"
                    class="form-control m-input m-input--solid"
                    placeholder="Search..."
                    [(ngModel)]="filterText"
                    (keyup)="$event.which === 13 ? getPipes() : 0"
                  />
                  <span class="m-input-icon__icon m-input-icon__icon--right">
                    <span> <i class="la la-search m--font-brand"></i> </span>
                  </span>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="m-portlet__body">
        <div class="row align-items-center" style="margin: 0">
          <div class="tab-content" style="width: 100%">
            <div class="tab-pane active">
              <div
                class="primeng-datatable-container"
                [busyIf]="primengTableHelper.isLoading"
              >
                <div class="m-pipeline">
                  <div class="table-responsive" style="min-height: 600px">
                    <table class="table" id="pipe-table" #dataTable>
                      <thead>
                        <tr>
                            <td
                            style="width: 20px;"
                            *ngIf="type == 3"
                        ></td>
                          <td class="m-pipeline__base">基础信息</td>
                          <td class="m-pipeline__node">状态信息</td>
                          <td class="m-pipeline__5">优先级</td>
                          <td class="m-pipeline__node">完成时间</td>
                          <td class="m-pipeline__node">节点信息</td>
                          <td class="m-pipeline__node">质控卡号</td>
                          <td class="m-pipeline__node">合格证号</td>
                          <td class="m-pipeline__node">任务类型</td>
                          <td class="m-pipeline__node">主制班组</td>
                          <td class="m-pipeline__need">需求角色(人员)</td>
                          <td class="m-pipeline__action">操作</td>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let pipe of primengTableHelper.records">
                            <td style="width: 33px;" *ngIf="type == 3">
                                <p-checkbox
                                    name="group1"
                                    value="{{ pipe.id }}"
                                    [(ngModel)]="selectedpipe"
                                ></p-checkbox>
                            </td>
                          <td>
                            <div class="row">
                              <div class="col-md-6">
                                <span class="m-pipeline__title">
                                  {{ pipe.barCode }}
                                </span>
                                <span class="m-pipeline__sub">
                                  数量：{{ pipe.amountPlanned }}
                                </span>
                                <!-- {{ pipe.batchString }} -->
                              </div>
                              <div class="col-md-6">
                                <span class="m-pipeline__title">
                                  {{ pipe.drawingCode }}
                                </span>
                                <span class="m-pipeline__sub">
                                  {{ pipe.taskName }}
                                </span>
                              </div>
                            </div>
                          </td>
                          <td>
                            <span
                              class="m-badge m-badge--success m-badge--wide"
                            >
                              {{ pipe.statusName }}
                            </span>
                          </td>
                          <td>
                            <span
                              class="m-badge m-badge--success m-badge--wide"
                            >
                              {{ pipe.priority }}
                            </span>
                          </td>
                          <td>
                            <span>
                              {{
                                pipe.dueDatePlanned | momentFormat: "YYYY-MM-DD"
                              }}
                            </span>
                          </td>
                          <td>
                            <span> {{ pipe.actCode }} {{ pipe.actName }} </span>
                          </td>
                          <td>
                            <span
                                    *ngIf="
                                    pipe.zhikongkaNo == null ||
                                    pipe.zhikongkaNo == ''
                                    "
                                >
                                    暂未记录质控卡
                                </span>
                                <span
                                    *ngIf="
                                    pipe.zhikongkaNo != null &&
                                    pipe.zhikongkaNo != ''
                                    "
                                >
                                    {{ pipe.zhikongkaNo }}
                                </span>
                          </td>
                          <td>
                            <span
                                            *ngIf="
                                            pipe.hgzNo == null ||
                                            pipe.hgzNo == ''
                                            "
                                        >
                                            暂未记录合格证
                                        </span>
                                        <span
                                            *ngIf="
                                            pipe.hgzNo != null &&
                                            pipe.hgzNo != ''
                                            "
                                        >
                                            {{ pipe.hgzNo }}
                                        </span>
                          </td>
                          <td>
                            <span> {{ pipe.taskTypeName }} </span>
                          </td>
                          <td>
                            <span> {{ pipe.mainTeamGroup }} </span>
                          </td>
                          <td>
                            <span>
                              {{ pipe.actRole }}
                              <span *ngIf="pipe.needUser">
                                {{ pipe.needUser }}</span
                              >
                            </span>
                          </td>
                          <td>
                            <button
                              *ngIf="isFinished"
                              type="button"
                              class="btn btn-sm m-btn m-btn--gradient-from-danger m-btn--gradient-to-warning"
                              (click)="stepDetailModal.show(pipe.id, $event)"
                            >
                              查看详细
                            </button>
                            <button
                              *ngIf="!isFinished && isMy"
                              type="button"
                              class="btn btn-sm m-btn m-btn--gradient-from-danger m-btn--gradient-to-warning"
                              (click)="actBase.show(pipe, $event)"
                            >
                              处理
                            </button>
                            <div
                              *ngIf="!isFinished"
                              class="dropdown"
                              style="display: inline-block; margin-left: 5px"
                            >
                              <button
                                class="btn btn-sm m-btn--gradient-from-accent m-btn--gradient-to-success dropdown-toggle"
                                type="button"
                                id="dropdownMenuButton"
                                data-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false"
                              >
                                操作
                              </button>
                              <div
                                class="dropdown-menu"
                                aria-labelledby="dropdownMenuButton"
                              >
                                <a
                                  class="dropdown-item"
                                  href="javascript:;"
                                  data-toggle="dropdown"
                                  aria-haspopup="true"
                                  aria-expanded="false"
                                  id="dropdownMenuA"
                                >
                                  <i
                                    class="la la-angle-left"
                                    style="margin: 0"
                                  ></i>
                                  触发异常
                                </a>
                                <div
                                  class="dropdown-menu dropdown-submenu"
                                  aria-labelledby="dropdownMenuA"
                                  style="margin-top: 42px !important"
                                >
                                  <a
                                    *ngFor="
                                      let actAbnormal of pipe.globalAbNodes
                                    "
                                    class="dropdown-item"
                                    href="javascript:;"
                                    (click)="
                                      actAbnormalModal.show(
                                        pipe,
                                        actAbnormal,
                                        $event
                                      )
                                    "
                                  >
                                    {{ actAbnormal }}
                                  </a>
                                  <a
                                    *ngFor="
                                      let actAbnormal of pipe.globalAbnormalComponents
                                    "
                                    class="dropdown-item"
                                    href="javascript:;"
                                    (click)="
                                      actAbnormalModal.show(
                                        pipe,
                                        actAbnormal,
                                        $event
                                      )
                                    "
                                  >
                                    {{ actAbnormal }}
                                  </a>
                                </div>
                                <a
                                  *ngIf="!isFinished && isMy"
                                  class="dropdown-item"
                                  style="margin-left: 20px"
                                  href="javascript:;"
                                  (click)="pipelineRun(pipe)"
                                >
                                  运行管道
                                </a>
                                <a
                                  *ngIf="pipe.actTypeName == '工序执行类'"
                                  class="dropdown-item"
                                  style="margin-left: 20px"
                                  href="javascript:;"
                                  (click)="quickGxzxModal.show(pipe, $event)"
                                >
                                  快速报工
                                </a>
                              </div>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <div class="primeng-paging-container">
                      <p-paginator
                        rows="{{
                          primengTableHelper.defaultRecordsCountPerPage
                        }}"
                        #paginator
                        (onPageChange)="getPipes($event)"
                        [totalRecords]="primengTableHelper.totalRecordsCount"
                        [rowsPerPageOptions]="
                          primengTableHelper.predefinedRecordsCountPerPage
                        "
                      >
                      </p-paginator>
                      <span class="total-records-count">
                        {{ "总计:" + primengTableHelper.totalRecordsCount }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <act-base #actBase (modalRun)="getPipes($event)"></act-base>
  <actAbnormalModal
    #actAbnormalModal
    (modalSave)="getPipes($event)"
  ></actAbnormalModal>
  <quickGxzxModal
    #quickGxzxModal
    (modalSave)="getPipes($event)"
  ></quickGxzxModal>
  <stepDetailModal
    #stepDetailModal
    (modalSave)="getPipes($event)"
  ></stepDetailModal>
</div>
